@font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI',
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
  Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  sans-serif;

// 每一个卡片都有一个 .x-component 的类名(.header + .plot-container 组成)
.x-component {
  background-color: #fff;
  border-radius: 2px;

  @media (max-width: 640px) {
    .plot-container {
      padding: 16px;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: @font-family;
      font-size: 16px;
      line-height: 16px;
      color: rgba(0, 0, 0, 0.85);
      letter-spacing: -0.2px;
      font-weight: 500;
    }

    .style-switcher {
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
      display: flex;
      align-items: center;
      cursor: pointer;
      :last-child {
        margin-left: 4px;
      }
    }
  }

  .header {
    padding: 16px 24px;
  }
  .plot-container {
    padding: 0 24px 24px;
  }
}

/** 拖拽部位的样式 start */
:not(.draggable) .header {
  cursor: default;
}

/** 拖拽部位的样式 end */

// 头部样式切换按钮
.header-style-switcher-menu {
  padding: 0;

  .menu-item {
    font-size: 12px;
    padding: 4px 8px;
  }

  .ant-dropdown-menu-item {
    color: rgba(0, 0, 0, 0.45);
  }

  .ant-dropdown-menu-item-selected {
    color: #009cff !important;
  }
}
